<template>
  <div class="shop">

    <el-button size="mini" type="primary" style="float:right;" @click="searchredPacketList">搜素</el-button>
    <el-input size="mini" style="float:right;width:240px;margin-bottom:12px;" v-model="mobile"
      placeholder="输入用户账号搜索"></el-input>

    <el-select style="width:100px;margin-right:12px;float:right;" v-model="order_status" filterable size="mini"
      placeholder="订单状态">
      <el-option label="待支付" :value="1"></el-option>
      <el-option label="已支付" :value="5"></el-option>
      <!-- <el-option label="已核销"
            :value="10"></el-option> -->
      <el-option label="已取消" :value="15"></el-option>
      <!-- <el-option label="已关闭"
            :value="20"></el-option> -->
    </el-select>


    <el-table :data="tableData" max-height="680" style="width:100%;margin:12px;" :cell-style="tc"
      :header-cell-style="tccolor">

      <el-table-column label="订单流水号" prop="orderNo"></el-table-column>
      <el-table-column label="时间" prop="createdAt"></el-table-column>
      <el-table-column label="用户账号">
        <template slot-scope="scope">
          <p v-if="scope.row.memberMobile">{{ scope.row.memberMobile }}</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="充值红包">
        <template slot-scope="scope">
          <p v-if="scope.row.actualAmount">{{ scope.row.actualAmount }}元</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="实付金额">
        <template slot-scope="scope">
          <p v-if="scope.row.payAmount">{{ scope.row.payAmount }}元</p>
          <p v-else>---</p>
        </template>
      </el-table-column>
      <el-table-column label="订单状态">
        <template slot-scope="scope">
          <p v-if="scope.row.orderStatus == 1"> 待支付</p>
          <p v-if="scope.row.orderStatus == 5"> 已支付</p>
          <p v-if="scope.row.orderStatus == 15"> 已取消</p>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination">
      <el-pagination background @current-change="pageChange" :current-page="page" :page-size="size"
        layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>

import { orderCommonList } from "@/api/store"
export default {
  data() {
    return {
      page: 1,
      size: 15,
      mobile: '',
      order_status: 0,
      tableData: [],
      total: 0,

    }
  },
  created() {
    this.getredpacketSerchordertypeData()
  },
  methods: {


    //搜索
    searchredPacketList() {
      this.getredpacketSerchordertypeData()
    },
    pageChange(page) {
      this.page = page
      this.getredpacketSerchordertypeData()
    },

    async getredpacketSerchordertypeData() {
      let data = {
        pageNum: this.page,
        pageSize: this.size,
        status: this.order_status,
        orderType: 20
      }
      var url = '&page=' + this.page +
        '&mobile=' + this.mobile +
        '&order_status=' + this.order_status
      let res = await orderCommonList(data)

      if (res.code === 200) {
        this.tableData = res.data.list
        this.total = res.data.total
      } else {
        this.$message.error(res.message)
      }
    },
    tc() {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor() {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    }
  }
}
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;

  .pagination {
    float: right;
  }
}
</style>
